<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单注册页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        form {
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 5px;
        }
        input {
            width: 100%;
            padding: 8px;
            margin: 8px 0;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            width: 100%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>用户注册</h1>
    <form id="registerForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        
        <label for="confirm">确认密码:</label>
        <input type="password" id="confirm" name="confirm" required>
        
        <button type="button" id="completeLink">注册</button>
    </form>

    <script>
        document.getElementById('completeLink').addEventListener('click', async function(e) {
            e.preventDefault();

            const form = document.getElementById('registerForm');
            const formData = new URLSearchParams();
            
            // 手动添加表单数据
            formData.append('username', form.username.value);
            formData.append('password', form.password.value);
            formData.append('confirm', form.confirm.value);

            // 检查密码和确认密码是否一致
            if (form.password.value !== form.confirm.value) {
                alert('密码和确认密码不一致！');
                return;
            }

            try {
                const response = await fetch('/cgi_main', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: formData
                });

                if (!response.ok) throw new Error('提交失败');
                window.location.href = '/index.html';
            } catch (error) {
                alert('注册失败: ' + error.message);
            }
        });
    </script>
</body>
</html>
<!-- <body>
    <h1>用户注册</h1>
    <form id="registerForm" action="/cgi_main" method="POST">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        
        <label for="confirm">确认密码:</label>
        <input type="password" id="confirm" name="confirm" required>
        
        <button type="button" id="completeLink">注册</button>
    </form>

    <script>
        document.getElementById('completeLink').addEventListener('click', async function(e) {
            e.preventDefault(); // 阻止默认行为

            const form = document.getElementById('registerForm');
            const formData = new FormData(form);

            // 检查密码和确认密码是否一致
            const password = formData.get('password');
            const confirmPassword = formData.get('confirm');
            
            if (password !== confirmPassword) {
                alert('密码和确认密码不一致！');
                return;
            }

            try {
                // 使用 Fetch API 提交数据到 CGI 后端
                const response = await fetch('/cgi_main', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error('提交失败');
                }

                // 提交成功后跳转到首页
                window.location.href = '/index.html';
            } catch (error) {
                console.error('提交出错:', error);
                alert('注册失败，请检查网络后重试');
            }
        });
    </script>
</body>
</html> -->

<!-- <body>
    <h1>用户注册</h1>
    <form id="registerForm" action="/cgi_main" method="POST">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        
        <label for="confirm">确认密码:</label>
        <input type="password" id="confirm" name="confirm" required>
        
        
        <a href="#" id="completeLink"><button type="submit">注册</button></a>
    </form>

    <script>
        document.getElementById('completeLink').addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默认的链接跳转行为
            
            // 创建一个隐藏的iframe来提交表单
            var iframe = document.createElement('iframe');
            iframe.name = 'hiddenFrame';
            iframe.style.display = 'none';
            document.body.appendChild(iframe);
            
            // 临时修改表单的target
            var form = document.getElementById('registerForm');
            var originalTarget = form.target;
            
            form.target = 'hiddenFrame'; // 在隐藏iframe中提交
            
            // 提交表单
            form.submit();
            
            // 恢复原始表单设置
            form.target = originalTarget;
            
            // 跳转到index.html
            window.location.href = '/index.html';
        });
    </script>
</body>
</html> -->

<!-- <body>
    <h1>用户注册</h1>
    <form action="/cgi_main" method="POST">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        
        <label for="confirm">确认密码:</label>
        <input type="password" id="confirm" name="confirm" required>
        
        <button type="submit">注册</button>
        <a href="/index.html">注册完毕</a>
    </form>
</body>
</html> -->